<template>
  <!--  海报分享
  https://mp.weixin.qq.com/wxamp/devprofile/add_qrcode?prefix=https%3A%2F%2Fwechat.yytqb.com&token=1108878238&lang=zh_CN
  https://ext.dcloud.net.cn/plugin?id=2389
  -->
    <view class="container">
<!--      <image :src="path" mode="widthFix" ></image>-->
<!--      <l-painter-->
<!--          :board="poster"-->
<!--          isCanvasToTempFilePath-->
<!--          @success="path = $event"-->
<!--          hidden/>-->

      <image :src="path" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
      <l-painter
          isCanvasToTempFilePath
          @success="path = $event"
          custom-style="position: fixed; left: 200%"
          css="width:750rpx;padding-bottom:400rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)"
      >
        <l-painter-view
            css=" margin:250rpx 30rpx 0rpx 30rpx; padding:40rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx;  box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
        >
          <l-painter-image
              :src="avatarUrl"
              css="width:150rpx;height:150rpx; border-radius: 50%; margin:-110rpx 230rpx 0rpx 230rpx;"
          />
          <l-painter-text :text="userName" css="width:100%;text-align: center;line-height:100rpx; font-size:28rpx" />

          <l-painter-text text="诚邀您加入我们的团队" css="width:100%;text-align: center;line-height:100rpx;font-size:28rpx"/>
<!--          <l-painter-qrcode css="height: 300rpx; width: 300rpx; margin:0 auto"-->
<!--              :text="qrcode"-->
<!--          ></l-painter-qrcode>-->
          <l-painter-image
              :src="promoCodeUrl"
              css="height: 300rpx; width: 300rpx; margin:0 auto "
          />
          <l-painter-view css="margin-top:15rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; text-align:center;">
            <l-painter-text text="邀请码：" css="vertical-align: bottom;" />
            <l-painter-text
                :text="promoCode"
                css="vertical-align: bottom; font-size: 58rpx"
            />
          </l-painter-view>
          <l-painter-view css=" width:100%;margin-top: 50rpx; color: #afafaf; font-weight: bold; font-size: 20rpx; line-height: 1em; text-align:center;">
            <l-painter-text text="步骤：扫描进入小程序码进行注册。" css="vertical-align: bottom" />
          </l-painter-view>
<!--          <l-painter-view css="width:100%;margin-top:10rpx; color: #afafaf; font-weight: bold; font-size: 20rpx; line-height: 1em;text-align:center;">-->
<!--            <l-painter-text text="第二步：填写相关信息完成注册操作。" css="vertical-align: bottom" />-->
<!--          </l-painter-view>-->
<!--          <l-painter-view css="margin: auto;margin-top: 32rpx; font-weight: bold; font-size: 28rpx; line-height: 1em;">-->
<!--            <l-painter-text text="第一步：扫描二维码进入注册页面。" css="vertical-align: bottom" />-->
<!--            <l-painter-text text="第二步：填写相关信息完成注册操作。" css="vertical-align: bottom" />-->

<!--          </l-painter-view>-->
        </l-painter-view>
      </l-painter>
    </view>

  <view  class="cu-bar bg-white tabbar shop shadow edit-fixed">
    <view class="submitBtn text-custom-bg text-white" @tap="saveImage()">保存海报</view>
  </view>

</template>

<script setup>
import {computed, reactive, ref, onMounted, watch} from "vue"
import {onLoad} from '@dcloudio/uni-app';
import {useStore} from "@/common/store";
// 以下路径需根据项目实际情况填写
import {pathToBase64, base64ToPath} from '@/common/utils/imageTools.js'
import {
  getPosterDetail,
} from "@/common/api/xiaohesuan.js";

const store = useStore();
const userId = computed(() => store.userId)
const userName = computed(() => store.userName)
const avatarUrl = computed(() => store.avatarUrl)
const qrcode = computed(() => store.qrcode)
const promoCode = computed(() => store.promoCode)
const promoCodeUrl = computed(() => store.promoCodeUrl)
// 用户创建的编号
const ucsId = ref('')
// 生成的二维码图片base64
const path = ref('');
// 二维码描述信息
const qrcodeDesc = ref("御研堂生物祛斑")

// 二维码信息
const qrcodeURL = ref("https://wechat.yytqb.com?type=xhs&aa=1")

const saveImage = () => {
  base64ToPath(path.value).then((res) => {
    uni.saveImageToPhotosAlbum({
      filePath: res,
      success: function () {
        uni.showToast({
          icon: 'none',
          title: '保存成功'
        })
      }
    });
  }).catch((error) => {
    console.error(error);
  });
}

/**
 * 初始化海报信息
 */
const initPoster = async () => {
  await getPosterDetail().then(res => {
    qrcodeDesc.value = res.posterDesc
    qrcodeURL.value = res.qrcodeUrl
  }).catch(reason => {
  })
}


onLoad((options) => {
  console.log('接收传值：', options)
});

onMounted(async () => {
  await initPoster();
});

</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
}
image{width: 567rpx; height: 767rpx;}
.address_nav_box{
  margin: 49rpx 120rpx 0 120rpx;
  padding:25rpx 103rpx 25rpx 103rpx;
  background-color: #377851;border-radius: 50rpx;
}


.submitBtn {
  width: 90%;
  height: 90rpx;
  background: #007aec;
  line-height: 90rpx;
  margin: 0rpx auto;
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  border-radius: 12rpx;
}

.edit-fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}
</style>
